<template>
  <div class="tinymce-editor">
    <editor id="editor" ref="editor" v-model="content"
            :init="init"
            :disabled="disabled"
            @onClick="onClick">
    </editor>
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/icons/default'

import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/code'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/directionality'
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/imagetools'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/link'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/noneditable'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/print'
import 'tinymce/plugins/save'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/spellchecker'
import 'tinymce/plugins/tabfocus'
import 'tinymce/plugins/template'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/textpattern'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'

// import API from '@/api'
export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    baseUrl: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    height: {
      type: [Number, String],
      default: 300
    },
    menubar: {
      type: String,
      default: 'file edit insert view format table'
    },
    plugins: {
      type: [String, Array],
      default: () => ['advlist anchor autolink autosave code codesample directionality fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textpattern visualblocks visualchars wordcount']
    },
    toolbar: {
      type: [String, Array],
      default: 'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table'
    }
  },
  data() {
    return {
      content: this.value,
      init: {
        selector: 'textarea#contextmenu-section',
        language_url: `${this.baseUrl}/tinymce/zh_CN.js`,
        language: 'zh_CN',
        skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide`,
        content_css: `${this.baseUrl}/tinymce/skins/content/default/content.css`,
        height: this.height,
        menubar: this.menubar,
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false,
        resize: false,
        contextmenu: 'undo redo bold italic forecolor backcolor media',
        images_upload_handler: (blobInfo, success, failure) => {
          // let formData = new FormData()
          // formData.set('file', blobInfo.blob())
          // formData.set('isPublic', true) // isPublic:true--不需要token获取该文件
          // API.common.upload(formData).then(res => {
          //   let _res = res.data
          //   if (_res.code === 200) {
          //     success('/api/file-service/file/preview/' + _res.data.id)
          //   } else {
          //     failure('上传失败')
          //   }
          // }).catch(() => {
          //   failure('上传失败')
          // })
          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          success(img)
        },
      },
    }
  },
  watch: {
    value(newValue) {
      this.content = newValue
    },
    content(newValue) {
      let replaceValue = newValue
      this.$emit('input', replaceValue)
    },
  },
  /* created() {
    const self = this
    tinymce.PluginManager.add('remark', function (editor) {
      editor.ui.registry.addMenuItem('remark', {
        text: '添加批注',
        onAction() {
          tinymce.activeEditor.execCommand('backcolor', true, '#e4fcff')
          self.$emit('remark-handle')
        }
      })
    })
  }, */
  methods: {
    onClick() {
      console.log(tinymce)
    },
    /* onClick(e) {
      this.$emit('on-click', e, tinymce)
    }, */
    clear() {
      this.content = ''
    }
  },
}
</script>
<style scoped>
.tinymce-editor {
}
</style>